<template>
  <div class="enterprise-wrap">
    <div class="enterprise-title">
      <div class="title-box" @click="queryEmploy(1)">
        <span :class="{'active1':type == 1}">蓝聘入职</span>
      </div>
      <div class="title-box" @click="queryEmploy(2)">
        <span :class="{'active1':type == 2}">线下入职</span>
      </div>
    </div>
    <div class="enterprise-search">
      <div class="search-box">
        <img src="../search.png" class="pic1" onclick="return false"/>
        <input type="text" placeholder="请输入姓名或手机号" class="search" v-model="key" v-if="type == 1" maxlength="11"/>
        <input type="text" placeholder="请输入姓名或工号" class="search" v-model="key" v-else maxlength="15"/>
      </div>
      <button type="button" class="search-btn" @click="searchEmploy">搜索</button>
    </div>

    <div class="entry-num">
      <span class="number">在职人数：{{entryObj.perNumber}}人</span>
    </div>

    <div class="enterprise-box" ref="wrapper">
      <div class="enterprise-list">

        <!--蓝聘入职-->
        <div class="enterprise-con" v-if="showData == 1" v-for="(item,index) in enterpriseList" :key="index">
          <div class="user-box">
            <img :src="item.userUrl" v-if="item.userUrl!=''" class="pic2" onclick="return false"/>
            <div class="pic2" v-else></div>
            <span class="name">{{item.userName}}</span>
            <span class="phone">{{item.userTel}}</span>
            <img src="./phone.png" class="pic3" onclick="return false"/>
            <div class="pull-box" v-if="item.mark" @click="open(index)">
              <img src="./pull.png" class="pic4" onclick="return false"/>
            </div>
            <div class="pull-box" v-else @click="close(index)">
              <img src="./down.png" class="pic4" onclick="return false"/>
            </div>
          </div>
          <div class="entry-box" v-if="!item.mark">
            <span class="day">入职日期：{{item.workBeginTime}}</span>
            <div class="btn-box">
              <button type="button" class="btn1" @click="leave(item.id,item.userId,1)">离职</button>
              <button type="button" class="btn2"
                      @click="editBlue(item.userName,item.userCardNumber,item.userTel,item.workBeginTime,item.id,item.userId)">
                编辑员工信息
              </button>
            </div>
          </div>
          <div class="more" v-if="index == enterpriseList.length-1" v-show="showMore">没有更多了</div>
        </div>

        <!--线下入职-->
        <div class="offline-con" v-if="showData == 2" v-for="(item,i) in enterpriseList" :key="i">
          <div class="offline-user">
            <div class="name-box">{{item.userName}}</div>
            <div class="num-box">
              <span class="num1">身份证号：{{item.userCardNumber}}</span>
              <span>工号：{{item.userTel}}</span>
            </div>
            <div class="pull-box" @click="open(i)" v-if="item.mark">
              <img src="./pull.png" class="pic4" onclick="return false"/>
            </div>
            <div class="pull-box" @click="close(i)" v-else>
              <img src="./down.png" class="pic4" onclick="return false"/>
            </div>
          </div>
          <div class="offline-time" v-if="!item.mark">
            <span class="day">入职日期：{{item.workBeginTime}}</span>
            <div class="btn-box">
              <button type="button" class="btn1" @click="leave(item.id,item.userId,2)">离职</button>
              <button type="button" class="btn2"
                      @click="editOffline(item.userName,item.userCardNumber,item.workBeginTime,item.id)">编辑员工信息
              </button>
            </div>
          </div>
          <div class="more" v-if="i == enterpriseList.length-1" v-show="showMore">没有更多了</div>
        </div>
      </div>
    </div>

    <div class="empty-wrap" v-if="showData == 3">
      <div class="empty-box">
        <div class="img-box"><img src="../empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

    <!--线下入职-->
    <div class="record-btn" v-if="showData == 2 || showData == 4" @click="recordPage">
      <img src="./btn_entry.png" class="pic5" onclick="return false"/>
    </div>

    <backpage @backPage="backPage"></backpage>
  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"
  import BScroll from 'better-scroll'
  import {getDeviceRatio, formatDate} from "../../../config/util"
  import backpage from "../../../components/backpage"
  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    data() {
      return {
        mechanismId: "",
        key: "",
        status: "",
        currentPage: 1,
        PageSize: 20,
        enterpriseScroll: null,
        enterpriseList: [],
        showData: 0,
        userSign: "",
        noMoreData: false,
        showPull: false,
        type: 1,
        workBeginTime: "",
        showMore: false,
        entryObj: ""
      }
    },
    mounted() {
      this.mechanismId = this.$route.query.mechanismId;
      if (this.$route.query.type) {
        this.type = this.$route.query.type;
      }
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.queryEnterpriseList();
    },
    methods: {
      queryEmploy(val) {
        this.type = val;
        this.currentPage = 1;
        this.PageSize = 20;
        this.key = "";
        this.queryEnterpriseList(() => {
          this.$nextTick(() => {
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      queryEnterpriseList(callback) {//查询企业员工管理(蓝聘入职)
        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/query_company_staff?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/query_company_staff?sgin=" + this.userSign + "&type=" + this.type + "&mechanismId=" + this.mechanismId + "&key=" + this.key + "&status=" + this.status + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();

          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {

              if (this.type == 1) {
                this.showData = 1;
              } else {
                this.showData = 2;
              }
              this.enterpriseList = resultObj.data;
              this.enterpriseList.forEach((val, key) => {
                this.$set(val, "mark", true);
                val.workBeginTime = formatDate(new Date(val.workBeginTime), 'yyyy-MM-dd');
              });
              this.entryObj = this.enterpriseList[0];
              if (callback) {
                callback();
              }
              this.$nextTick(() => {
                this.initScroll();
                this.enterpriseScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.enterpriseScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });

            } else {
              this.showData = 3;
              if (this.type == 2) {
                this.showData = 4;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      open(index) {//展开
        for (let i = 0, length = this.enterpriseList.length; i < length; i++) {
          if (index == i) {
            this.enterpriseList[i].mark = false;
            break;
          }
        }
      },
      close(index) {//关闭
        for (let i = 0, length = this.enterpriseList.length; i < length; i++) {
          if (index == i) {
            this.enterpriseList[i].mark = true;
            break;
          }
        }
      },
      leave(id, userId, type) {//离职
        this.$router.push({
          "path": '/employleave',
          query: {
            "mechanismId": this.mechanismId,
            "id": id,
            "userId": userId,
            "type": type
          }
        });
      },
      editBlue(name, number, tel, beginTime, id, userId) {//蓝聘员工信息
        this.$router.push({
          "path": '/enterpriseblue',
          query: {
            "name": name,
            "number": number,
            "tel": tel,
            "beginTime": beginTime,
            "mechanismId": this.mechanismId,
            "id": id,
            "userId": userId
          }
        });
      },
      editOffline(name, number, beginTime, id) {//线下员工信息
        this.$router.push({
          "path": '/enterpriseoffline',
          query: {
            "name": name,
            "number": number,
            "beginTime": beginTime,
            "mechanismId": this.mechanismId,
            "id": id
          }
        });
      },
      recordPage() {//员工录入
        this.$router.push({path: "/employrecord", query: {"mechanismId": this.mechanismId}});
      },
      searchEmploy() {//根据key查询
        this.currentPage = 1;
        this.PageSize = 20;
        this.queryEnterpriseList(() => {
          this.$nextTick(() => {
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/query_company_staff?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          setTimeout(() => {
            this.axios.get(baseUrl + "/resident/query_company_staff?sgin=" + this.userSign + "&type=" + this.type + "&mechanismId=" + this.mechanismId + "&key=" + this.key + "&status=" + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  if (this.type == 1) {
                    this.showData = 1;
                  } else {
                    this.showData = 2;
                  }
                  resultObj.data.forEach((val, key) => {
                    this.$set(val, "mark", true);
                    val.workBeginTime = formatDate(new Date(val.workBeginTime), 'yyyy-MM-dd');
                  });
                  this.enterpriseList = this.enterpriseList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                  this.showMore = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.enterpriseScroll) {
          this.enterpriseScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.enterpriseScroll.refresh();
        }
      },
      enable() {
        this.enterpriseScroll && this.enterpriseScroll.enable()
      },
      refresh() {
        this.enterpriseScroll && this.enterpriseScroll.refresh()
      },
      finishPullUp() {
        this.enterpriseScroll && this.enterpriseScroll.finishPullUp()
      },
      backPage() {
        this.$router.push({path: "/residentIndex"});
      }
    },
    watch: {
      enterpriseList() {
        this.$nextTick(() => {
          this.enterpriseScroll.refresh();
        })
      }
    },
    components: {
      BScroll,
      backpage
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .enterprise-wrap
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    .enterprise-title
      display: flex
      align-items: center
      wh(100%, 1.173rem)
      background: rgba(255, 255, 255, 1)
      .title-box
        fj(center, center)
        flex: 1
        height: 1.173rem
        span
          wh(2rem, 1.173rem)
          height: 1.173rem
          line-height: 1.173rem
          text-align: center
          size-color(0.427rem, rgba(102, 102, 102, 1))
        .active1
          border-bottom: 0.053rem solid rgba(60, 175, 255, 1)
          font-weight: 500
          color: rgba(60, 175, 255, 1)
    .enterprise-search
      display: flex
      align-items: center
      wh(100%, 1.2rem)
      background: rgba(60, 175, 255, 1)
      .search-box
        display: flex
        align-items: center
        margin-left: 0.32rem
        wh(7.307rem, 0.8rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.4rem)
        .pic1
          wh(0.533rem, 0.533rem)
          padding-left: 0.267rem
          padding-right: 0.32rem
        .search
          width: 80%
          height: 0.5rem
          line-height: 0.5rem
          size-color(0.4rem, rgba(204, 204, 204, 1))
      .search-btn
        text-align: center
        line-height: 0.72rem
        margin-left: auto
        margin-right: 0.32rem
        wh(1.44rem, 0.72rem)
        border: 0.027rem solid rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        size-color(0.4rem, rgba(255, 255, 255, 1))
        background: $color
    .entry-num
      display: flex
      align-items: center
      wh(100%, 0.64rem)
      size-color(0.32rem, rgba(153, 153, 153, 1))
      .number
        margin-left: 0.32rem
    .enterprise-box
      position: fixed
      top: 3.013rem
      bottom: 0
      overflow: hidden
      wh(100%, auto)
      .enterprise-list
        display: flex
        flex-direction: column
        wh(100%, auto)
        .enterprise-con
          wh(100%, auto)
          overflow: hidden
          .user-box
            display: flex
            align-items: center
            wh(100%, 1.6rem)
            background: rgba(255, 255, 255, 1)
            border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
            .pic2
              margin-left: 0.32rem
              margin-right: 0.347rem
              wh(1.067rem, 1.067rem)
              background: rgba(242, 242, 242, 1)
              border-radius(50%)
            .name
              width: 2.3rem
              size-color(0.453rem, rgba(51, 51, 51, 1))
              ellipsis()
            .phone
              margin-left: 0.267rem
              margin-right: 0.48rem
              size-color(0.373rem, rgba(102, 102, 102, 1))
            .pic3
              wh(0.533rem, 0.533rem)
            .pull-box
              fj(center, center)
              margin-left: auto
              wh(1.76rem, 1.6rem)
              .pic4
                wh(0.373rem, 0.373rem)
          .entry-box
            display: flex
            align-items: center
            wh(100%, 1.2rem)
            background: rgba(242, 242, 242, 1)
            .day
              size-color(0.347rem, rgba(153, 153, 153, 1))
              margin-left: 0.307rem
            .btn-box
              margin-left: auto
              margin-right: 0.307rem
              .btn1
                text-align: center
                line-height: 0.64rem
                margin-right: 0.4rem
                wh(1.333rem, 0.64rem)
                border: 0.027rem solid rgba(128, 128, 128, 1)
                border-radius(0.32rem)
                background: #FFF
                size-color(0.347rem, rgba(128, 128, 128, 1))
              .btn2
                text-align: center
                line-height: 0.64rem
                wh(2.587rem, 0.64rem)
                border: 0.027rem solid rgba(60, 175, 255, 1)
                border-radius(0.32rem)
                size-color(0.347rem, rgba(60, 175, 255, 1))
                background: #FFF
          .more
            text-align: center
            padding-bottom: 0.667rem
            margin-top: 0.467rem
            size-color(0.373rem, rgba(153, 153, 153, 1))
        .offline-con
          wh(100%, auto)
          overflow: hidden
          .offline-user
            display: flex
            wh(100%, 1.893rem)
            background: rgba(255, 255, 255, 1)
            border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
            .name-box
              margin-top: 0.427rem
              padding-left: 0.32rem
              width: 2.3rem
              ellipsis()
              size-color(0.453rem, rgba(51, 51, 51, 1))
            .num-box
              display: flex
              flex-direction: column
              margin-top: 0.427rem
              size-color(0.373rem, rgba(102, 102, 102, 1))
              .num1
                padding-bottom: 0.32rem
            .pull-box
              fj(center, center)
              margin-left: auto
              wh(1.5rem, 1.5rem)
              .pic4
                wh(0.373rem, 0.373rem)
          .offline-time
            display: flex
            align-items: center
            wh(100%, 1.2rem)
            background: rgba(242, 242, 242, 1)
            .day
              size-color(0.347rem, rgba(153, 153, 153, 1))
              margin-left: 0.307rem
            .btn-box
              margin-left: auto
              margin-right: 0.307rem
              .btn1
                text-align: center
                line-height: 0.64rem
                margin-right: 0.4rem
                wh(1.333rem, 0.64rem)
                border: 0.027rem solid rgba(128, 128, 128, 1)
                border-radius(0.32rem)
                background: #FFF
                size-color(0.347rem, rgba(128, 128, 128, 1))
              .btn2
                text-align: center
                line-height: 0.64rem
                wh(2.587rem, 0.64rem)
                border: 0.027rem solid rgba(60, 175, 255, 1)
                border-radius(0.32rem)
                size-color(0.347rem, rgba(60, 175, 255, 1))
                background: #FFF
          .more
            text-align: center
            padding-bottom: 0.667rem
            margin-top: 0.467rem
            size-color(0.373rem, rgba(153, 153, 153, 1))
    .record-btn
      position: fixed
      wh(1.76rem, 1.76rem)
      bottom: 1.2rem
      right: 0.32rem
      .pic5
        wh(1.76rem, 1.76rem)
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 2.373rem
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
